<template>
  <section class="dataTable" :style="tableStyle">
    <el-table 
      ref="mainTable" 
      :data="tableData" 
      height='580' 
      :max-height="maxHeight" 
      border 
      stripe 
      style="width: 100%"
      tooltip-effect="light" 
      size="medium" 
      highlight-current-row 
      @row-click="rowClick" 
      :style="styleObj" 
      header-cell-class-name="edit-th">
      <el-table-column 
        v-for="(column, index) of _columns" 
        :key="column.prop" 
        v-bind="column" 
        show-overflow-tooltip
        resizable 
        :min-width="handleWidth(column.label)"
        :fixed="fixedHandle(index)"
        >
      </el-table-column>
      <el-table-column label="操作" :width="oprationWidth" fixed="right" :show-overflow-tooltip="true" :render-header="editRenderHeader">
        <template slot-scope="scope">
          <el-button 
            v-for="(item, index) in modifySettings" 
            :key="item.eventName" 
            @click.stop="$emit(item.eventName, scope.row)" 
            :type="item.btnType" 
            style="margin: 0px;" 
            size="mini" >
            {{ item.name }}
            <!-- <span v-if="getUserElementRule(item.code)">{{ item.operation }}</span>  -->
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer style="text-align: right" v-if="hasPagination">
      <el-pagination v-if="paginationType == 'default'" class="page" small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageObj.page" :page-sizes="[10, 50, 100, 200]" :page-size="pageObj.size || 10" layout="total, prev, pager, next, jumper" :total="pageObj.total">
      </el-pagination>
      <el-pagination v-else class="page page-small" small @current-change="handleCurrentChange" :current-page="pageObj.page" :page-size="10" layout="total, prev, pager, next" :total="pageObj.total">
      </el-pagination>
    </footer>
  </section>
</template>

<script>
const relation = require("@/mock/relation.json");

export default {
  props: {
    canEditTable: Boolean,
    tableData: Array, // 表格数据
    hasPagination: { type: Boolean, default: true }, // 控制是否显示分页
    maxHeight: { type: String, default: "710" },
    oprationWidth: { type: Number, default: 275 },
    modifySettings: Array,
    rowClick: {
      type: Function,
      default: () => {}
    },
    _columns: { // 表头数据及prop
      type: Array,
    },
    fixed: Array,
    pageObj: Object,
    updateCallback: Function,
    styleObj: {
      type: Object,
      default(){
        return {
          width: '100%'
        }
      }
    },
    iconTitle: String,
    iconClass: String,
    modifyHeader: Function,
    showCalendar: Function,
    tableStyle: {
      type: Object,
      default(){
        return {
          width: '100%'
        }
      }
    },
    paginationType: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    // 设置高亮行
    setCurrentRow(row) {
      this.$refs.mainTable.setCurrentRow(row)
    },
    // 表头宽度设置
    handleWidth(width) {
      return (width && width.length) * 10 + 80 + ''
    },
    // 改变每页显示数量
    handleSizeChange(size, currentPageNo) {
      this.pageObj.size = size;
      this.pageObj.page = 1;
      this.updateCallback();
    },
    handleCurrentChange(page) {
      this.pageObj.page = page;
      this.updateCallback();
    },
    // 固定列处理
    fixedHandle(index) {
      return false
      if (index < this.fixed[0]) {
        return true
      }
    },
    isOverTime(endTime) {
      let endTimer = new Date(endTime).getTime()
      let nowTimer = new Date().getTime()
      if (endTimer < nowTimer) {
        return '#F56C6C'
      } else {
        return 'inherit'
      }
    },
    setCurrentRow(row) {
      this.$refs.mainTable.setCurrentRow(row)
    },
    editRenderHeader(h) {
      if(!this.iconClass || !this.showCalendar) {
        if (this.canEditTable) {
          return h('span', [
            h('span', {}, ['操作']),
            h('span', {
              style: 'position: absolute; right: 0; top: -10px; width: 60px; height: 49px; line-height: 55px; text-align: center; color: #fff; background: #DFE2E4; cursor: pointer;',
              on: {
                'click': this.modifyHeader
              },
              attrs: {
                title: '编辑表头'
              }
            }, [
              h('svg-icon', {
                style: 'font-size: 24px',
                attrs: {
                  'icon-class': 'operation'
                }
              })
            ])
          ])
        } else {
          return h('span', [
            h('span', {}, ['操作'])
          ])
        }
      } else {
        if (this.canEditTable) {
          return h(
            "span",
            [
              h('span', ['操作']),
              h('span', {
                style: 'position: absolute; right: 14px; top: -10px; width: 60px; height: 49px; line-height: 55px; text-align: center; color: #fff; background: #DFE2E4; cursor: pointer;',
                on: {
                  'click': this.modifyHeader
                },
                attrs: {
                  title: '编辑表头'
                }
              }, [
                h('svg-icon', {
                  style: 'font-size: 24px',
                  attrs: {
                    'icon-class': 'operation'
                  }
                })
              ]),
              h('span', {
                class: 'table-header-icon',
                style: 'position: absolute; right: 0; top: -10px; height: 49px; line-height: 55px; text-align: center; color: #fff; background: #82B0FF; cursor: pointer;',
                on: {
                  'click': this.showCalendar
                },
                attrs: {
                  title: this.iconTitle
                }
              }, [
                h('i', {
                  class: this.iconClass
                })
              ])
            ])
        } else {
          return h(
            "span",
            [
              h('span', ['操作']),
              h('span', {
                class: 'table-header-icon',
                style: 'position: absolute; right: 0; top: -10px; height: 49px; line-height: 55px; text-align: center; color: #fff; background: #82B0FF; cursor: pointer;',
                on: {
                  'click': this.showCalendar
                },
                attrs: {
                  title: this.iconTitle
                }
              }, [
                h('i', {
                  class: this.iconClass
                })
              ])
            ])
        }
      }
    },
  }
}
</script>

<style lang="scss">
.page {
  margin: 15px auto 15px;
}

.dataTable {
  // 表头样式
  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    tr,
    th {
      color: #333333;
      font-weight: bold;
      background-color: rgba(245, 247, 250, 1);
    }
  }
  // 表格内容样式
  .el-table thead {
    color: #333333;
  }
  .el-table {
    color: #333333;
  }

  // 表格数据距左边距离
  .el-table .cell,
  .el-table th div,
  .el-table--border td:first-child .cell,
  .el-table--border th:first-child .cell {
    line-height: 29px;
    padding-left: 20px;
    .el-button--small {
      padding: 0;
    }
  }

  .el-table__body {
    tr.el-table__row--striped {
      td {
        background: rgba(249, 249, 249, 1); // 偶数行条纹颜色
      }
      // 偶数行点击当前行时属性
      &.current-row td {
        background-color: rgba(226, 243, 255, 1);
      }
    }

    // hover时颜色
    tr:hover > td {
      background-color: rgba(242, 248, 255, 1);
    }

    // el-table配置highlight-current-row属性 点击行时有current-row属性
    tr.current-row > td {
      background-color: rgba(226, 243, 255, 1);
    }
  }
}
</style>

<style>
.edit-th .cell {
  overflow: visible;
}
</style>

